import { useEffect, useState } from 'react'
import { Image, Ellipsis, NavBar, Skeleton, Footer } from 'antd-mobile'
import styles from "./index.module.less"
import HeaderNav from "@/components/header-nav"
import FooterNav from "@/components/footer-nav"
import { useSearchParams, useParams } from 'react-router-dom'
import { DeleteOutline, EditSOutline, EyeOutline } from 'antd-mobile-icons'
import { showSuccessToast } from '@/utils/customToast';
const { getWorldBookDetails, importWorldBook } = $globalServicer('world')
const ItemCrad = (props) => {

  const [params] = useSearchParams();
  console.log("🚀 ~ ItemCrad ~ params:", params)
  const id = params.get('id');
  console.log(`------id`, id)
  const [worldInfo, setWorldInfo] = useState(null)
  const handleAddToMyCollection = () => {
    importWorldBook({
      id
    }).then(res => {
      showSuccessToast('导入成功');
    })
  }
  useEffect(() => {
    getWorldBookDetails(id).then(res => {
      console.log(`------res`, res)
      setWorldInfo(res)
    });
  }, [])
  return (
    <div className={`${styles.container} dark-theme`}>
      <div className={styles.header}>
        <HeaderNav backArrow={true} title={worldInfo?.name}></HeaderNav>
      </div>
      
      <div className={styles.heroSection}
        style={{ backgroundImage: `url(${worldInfo?.cover})`, backgroundSize: 'cover' }}
      >
        <div className={styles.heroOverlay}>
          <div className={styles.viewCount}>
            <EyeOutline />
            <span>{worldInfo?.view}</span>
          </div>
        </div>
      </div>
      
      <div className={styles.contentWrapper}>
        <div className={styles.titleSection}>
          <h1 className={styles.title}>{worldInfo?.name}</h1>
          <p className={styles.description}>
            {worldInfo?.description}
          </p>
        </div>
        
        <div className={styles.section}>
          <h2 className={styles.sectionTitle}>世界主要角色</h2>
          <div className={styles.roleList}>
            {
              worldInfo?.roles?.map((item, index) =>
                <div className={styles.roleCard} key={item.id}>
                  <div className={styles.roleHeader}>
                    <img src={item.cover} alt={item.name} className={styles.roleAvatar} />
                    <h3 className={styles.roleName}>{item.name}</h3>
                  </div>
                  <p className={styles.roleDescription}>
                    {item.desc}
                  </p>
                </div>
              )
            }
          </div>
        </div>
        
        <div className={styles.section}>
          <h2 className={styles.sectionTitle}>作者</h2>
          <div className={styles.authorCard}>
            <img src={worldInfo?.user_cover} alt={worldInfo?.user_name} className={styles.authorAvatar} />
            <span className={styles.authorName}>{worldInfo?.user_name}</span>
          </div>
        </div>
        
        {
          worldInfo?.is_show && (
            <div className={styles.actionSection}>
              <button className={styles.actionButton} onClick={handleAddToMyCollection}>
                添加到我的列表
              </button>
            </div>
          )
        }
      </div>
      
      <FooterNav></FooterNav>
    </div>
  );
};

export default ItemCrad;
